<template>
  <div class="div-1">
    <div class="my">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in tu">
          <router-link :to="item.path">
            <img :src="item.URL" alt="" />
            <p>{{ item.type }}</p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import one from '../../assets/1.png'
import two from '../../assets/2.png'
import three from '../../assets/3.png'
import four from '../../assets/4.png'
import five from '../../assets/5.png'

// console.log(one);
import Swiper from "swiper";

export default {  
  name: "NaviGationTwo",
  components: {},
  data() {
    return {
      tu: [
        {
          path: "/LiangRen",
          URL: one,
          type: "拼团",
        },
        {
          path: "/LiangRen",
          URL:two,
          type: "三人拼团",
        },
        {
          path: "/LiangRen",
          URL: three,
          type: "配行榜",
        },
        {
          path: "/LiangRen",
          URL: four,
          type: "五人成团",
        },
        {
          path: "/LiangRen",
          URL: five,
          type: "十人拼团",
        },
        {
          path: "/LiangRen",
          URL: one,
          type: "拼团",
        },
      ],
    };
  },
  mounted() {
    new Swiper(".my", {
      slidesPerView: 5,
      spaceBetween: 0,
      freeMode: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  },
};
</script>

<style lang="less" scoped>
@import "../../../node_modules/swiper/swiper-bundle.min.css";
.div-1 {
  background-color: rgb(255, 255, 255);
}
.swiper-slide {
  padding: 1rem 0;
  text-align: center;
  font-size: 13px;
  background: #fff;
  margin: 0 auto;
  /* Center slide text vertically */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  p {
    margin-top: 0.3rem;
  }
}
.swiper-slide img {
  margin: 0 auto;
  display: block;
  width: 2rem;
  object-fit: cover;
}
</style>